<script>
import { moment } from 'istrong-timeutil'
import assign from 'lodash/assign';
import { MessageBox } from 'mint-ui';
import DatetimePicker from './DatetimePicker.vue';
import { vSelect } from 'istrong-mvue-common-ui';

export default {
  name: 'dateTimeRange',
  components: {
    'istrong-datetimepicker': DatetimePicker,
    'istrong-select': vSelect
  },
  props: {
    value: {
      type: Object,
      default: {
        beginTime: '',
        endTime: ''
      }
    },
    timeOpts: {
      type: Array
    }
  },
  data () {
    return {
      timeSelectOpts: [],
      timeSelected: null,
      selectedCustomizeTime: false,
      beginTime: moment().format('YYYY-MM-DDTHH:mm:ss'),
      endTime: moment().format('YYYY-MM-DDTHH:mm:ss'),
      formatText: ''
    }
  },
  watch: {
    timeSelected (val) {
      if (!val) {
        return;
      }

      if (val.info) {
        let bTime = moment(moment().format(val.info.from)).add('hours', val.info.from_val);
        let eTime = moment(moment().format(val.info.to)).add('hours', val.info.to_val);

        let formatText = val.info.output.diffDayFormat
        if (bTime.year() !== eTime.year()) {
          formatText = val.info.output.diffYearForamt;
        } else if (bTime.month() !== eTime.month()) {
          formatText = val.info.output.diffMonthFormat;
        }
        this.formatText = bTime.format(formatText) + '-' + eTime.format(formatText);

        this.$emit('input', {
          beginTime: bTime.format('YYYY-MM-DDTHH:mm:ss'),
          endTime: eTime.format('YYYY-MM-DDTHH:mm:ss')
        })
        this.selectedCustomizeTime = false;
        return;
      }
      this.formatText = '自定义时间范围';
      this.selectedCustomizeTime = true;
    },
    beginTime (val) {
      if (!this.validate()) {
        this.endTime = this.beginTime;
        return;
      }

      this.$emit('input', {
        beginTime: this.beginTime,
        endTime: this.endTime
      });
    },
    endTime (val) {
      if (!this.validate()) {
        this.endTime = this.beginTime;
        return;
      }

      this.$emit('input', {
        beginTime: this.beginTime,
        endTime: this.endTime
      });
    }
  },
  created () {
    this.initTimeSelectOpts();
    this.createdFixedRangeToParent();
  },
  mounted () {
  },
  methods: {
    initTimeSelectOpts () {
      let selectData = [];
      this.timeOpts.forEach(item => {
        let info = assign({
          output: {
            diffYearForamt: "YYYY年MM月DD日HH时",
            diffMonthFormat: "MM月DD日HH时",
            diffDayFormat: "DD日HH时"
          }
        }, item);

        let selectOption = {
          key: info._id || info.id,
          value: info.name,
          info: info
        };
        selectData.push(selectOption);
      });
      let selected = null;
      let cHour = parseInt(moment().format('H'), 10);
      for (let i = selectData.length - 1; i >= 0; i--) {
        let item = selectData[i];
        if (item.info.timeReference !== undefined && cHour >= item.info.timeReference) {
          selected = item;
          break;
        }
      }
      selected = selected || selectData[0];
      selectData.push({
        key: 'customize',
        value: '自定义时间范围',
        info: null
      });
      this.timeSelectOpts = selectData;
      this.timeSelected = selected;
    },
    createdFixedRangeToParent () {
      let selected = this.timeSelected;
      let bTime = moment(moment().format(selected.info.from)).add('hours', selected.info.from_val);
      let eTime = moment(moment().format(selected.info.to)).add('hours', selected.info.to_val);

      let formatText = selected.info.output.diffDayFormat
      if (bTime.year() !== eTime.year()) {
        formatText = selected.info.output.diffYearForamt;
      } else if (bTime.month() !== eTime.month()) {
        formatText = selected.info.output.diffMonthFormat;
      }
      this.formatText = bTime.format(formatText) + '-' + eTime.format(formatText);

      this.$emit('input', {
        beginTime: bTime.format('YYYY-MM-DDTHH:mm:ss'),
        endTime: eTime.format('YYYY-MM-DDTHH:mm:ss')
      });
    },
    validate () {
      let b = moment(this.beginTime).toDate();
      let e = moment(this.endTime).toDate();
      if (e < b) {
        MessageBox('提示', '查询结束时间不能早于开始时间');
        return false;
      }
      return true;
    }
  }
}
</script>

<template>
  <div class="dateTimeRange">
    <div class="dateTimeRange-Select">
      <div class="ion-android-time dateTimeRange-Icon"></div>
      <div class="dateTimeRange-Time-Select">
        <span>{{formatText}}</span>
        <istrong-select
          :data="timeSelectOpts"
          v-model="timeSelected"
          class="dateTimeRange-Time-InputSelect"
        ></istrong-select>
      </div>
    </div>
    <div
      class="dateTimeRange-Time-Customize"
      v-show="selectedCustomizeTime"
    >
      <div>
        <div class="customizeTimeTip">起：</div>
        <istrong-datetimepicker
          v-model="beginTime"
          class="timeRange"
          format="YYYY年MM月DD日HH时mm分"
        ></istrong-datetimepicker>
      </div>
      <div>
        <div class="customizeTimeTip">止：</div>
        <istrong-datetimepicker
          v-model="endTime"
          class="timeRange"
          format="YYYY年MM月DD日HH时mm分"
        ></istrong-datetimepicker>
      </div>
    </div>
  </div>
</template>
<style>
.dateTimeRange {
  font-size: 16px;
}
.dateTimeRange > div {
  float: left;
  width: 100%;
}
.dateTimeRange-Select,
.dateTimeRange-Time-Customize > div {
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.dateTimeRange-Icon {
  color: #5399d7;
  font-size: 25px;
  margin-right: 8px;
}
.dateTimeRange-Time-Select {
  width: 87%;
  position: relative;
}
.dateTimeRange-Time-Select > span {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden !important;
  white-space: nowrap;
  padding-right: 15px;
}
.dateTimeRange-Time-InputSelect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  padding: 0px;
  background: transparent !important;
}
.dateTimeRange-Time-InputSelect > span {
  opacity: 0;
}
.dateTimeRange-Time-Customize {
  margin: 4px 3px;
  background-color: #e3e3e3;
  border: 1px solid #bbbbbb;
  width: 98% !important;
}
.dateTimeRange-Time-Customize > div {
  margin: 6px 0px;
}
.customizeTimeTip {
  min-width: 32px;
  width: 15%;
  margin-left: 6px;
  text-align: right;
}
.timeRange {
  width: 83%;
  background: #fff;
  margin-right: 6px;
}
</style>